import React from 'react';
import { Col, Icon, Select } from 'antd';
import _ from 'lodash';
import { connect } from 'dva';
import {
  utils,
  BaseTable,
  SelectEditor,
  NumberView,
  InputEditor,
  TextWithTags,
} from '@/components/BaseTable';

const { Option } = Select;
@connect(state => ({
  areaSegments: state.global.areaSegments,
  items: state.PriceManageItems.all,
}))
export default class TagsCellRenderer extends React.PureComponent {
  state = {};

  changeArea = value => {
    let rowData = _.cloneDeep(this.props.rowData);
    rowData = {
      ...rowData,
      areaPart: value,
    };
    const { dispatch } = this.props;
    dispatch({
      type: 'PriceManageItems/saveRows',
      payload: { rowData, category: this.props.category, isMarketing: this.props.isMarketing },
    });
  };

  render() {
    const { editing, items, rowData, cellData, batchAdjust } = this.props;
    let areaSegments = _.orderBy(this.props.areaSegments, ['id'], ['asc']);
    areaSegments = _.map(areaSegments, item => item.dictValue);
    // 去除重复的
    const brothers = _.filter(
      items,
      item => item.pid === rowData.pid && item.isSplit !== 1 && item.isDeleted !== true,
    );
    const areaSegments1 = _.map(brothers, item => item.areaPart);
    areaSegments = _.without(areaSegments, ...areaSegments1);
    let result = null;
    if (editing && batchAdjust * 1 === 0) {
      if (rowData.isHouseLeaf && rowData.canEditOther) {
        result = (
          <SelectEditor
            placeholder="请选择面积段"
            onChange={this.changeArea}
            cellData={cellData.text}
            // style={{ width: '80%' }}
            validateStatus={rowData.errorAreaSegment ? 'error' : 'success'}
          >
            {areaSegments.map(item => (
              <Option key={item} value={item}>
                {item}
              </Option>
            ))}
          </SelectEditor>
        );
      } else {
        result = <TextWithTags {...this.props} />;
      }
    } else {
      result = (
        <Col
          onClick={() => {
            window.console.log(rowData);
          }}
        >
          <TextWithTags {...this.props} />
        </Col>
      );
    }

    return result;
  }
}
